<template>
  <div class="operation_panel">
    <el-button type="primary" :icon="Plus" @click="showAddDialog">添加新数据</el-button>
    <el-button type="danger" :icon="Delete" @click="handleDeleteSelectionRows">删除选中行数据</el-button>
  </div>
  <!--  表头-->
  <!--  利用 :data 属性绑定数据源来实现循环输出每一行数据-->
<!--  <el-table :data="tableData" style="width: 100%" border ref="multipleTableRef">-->
<!--  利用 JavaScript 数组的slice方法，根据计算出的起始和结束索引来截取tableData中的部分数据-->
  <el-table :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)" style="width: 100%" border ref="multipleTableRef">
    <el-table-column fixed type="index" label="序号" width="60"/>
    <el-table-column fixed type="selection" width="60"/>
    <el-table-column fixed prop="id" label="Id" width="120"/>
    <el-table-column prop="name" label="用户名" width="120"/>
    <el-table-column prop="num" label="帐户余额"/>
    <el-table-column fixed="right" label="操作" width="150">
<!--      对于表格中的每一行数据，el-table 会创建一个对应的 scope 对象，这个 scope 对象包含了与该行相关的一些信息。scope 中包含的 row 属性实际上就是对应那一行的原始数据对象-->
      <template #default="scope">
        <el-button
            size="small"
            type="primary"
            @click="showEditDialog(scope.$index, scope.row)"
        >
          Edit
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--  表尾-->
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[20, 40, 60, 80,100]"
      background
      layout="prev, pager, next, jumper, total, sizes"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <!--添加新数据对话框-->
  <!--    模态框-->
  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form" label-position="right" label-width="auto">
<!--      //***-->
      <el-form-item label="用户名">
        <el-input v-model="form.name" autocomplete="off"/>
      </el-form-item>
<!--      //***-->
      <el-form-item label="帐户余额">
        <el-input v-model.number="form.num" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="!isEdit" type="primary" @click="handleAdd">新增</el-button>
        <el-button v-else type="primary" @click="handleEdit">修改</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {Delete, Plus} from "@element-plus/icons-vue";
import axios, {Axios} from "axios";

export default {
  components: {Delete, Plus},
  computed: {
    Delete() {
      return Delete
    },
    Plus() {
      return Plus
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 100,
      dialogFormVisible: false,
      isEdit: false,
      tableData: [],
      form: {
        name: '',
        num: 0,
      },
    }
  },
  created() {
    this.getTableData()
  },
// <!--      //***-->
  methods: {
    // 1.获取所有数据
    async getTableData() {
      const res = await axios.get('/api/wu_vue_2_test/get')
      console.log(res.data);
      this.tableData = res.data.data;
    },
    // 2.添加新数据
    async handleAdd() {
      console.log(this.form)
      // 修改添加新数据的url即可
      const res = await axios.post('/api/wu_vue_2_test/add', this.form)
      console.log(res);
      this.dialogFormVisible = false
      await this.getTableData()
      this.showMsg(res)
    },

    // 3.删除当前行数据
    async handleDelete(index, row) {
      const res = await axios.post('/api/wu_vue_2_test/del', row)
      await this.getTableData()
      this.showMsg(res)
    },

    // 4.修改当前行数据
    async handleEdit() {
      const res = await axios.post('/api/wu_vue_2_test/update', this.form)
      this.dialogFormVisible = false
      await this.getTableData()
      this.showMsg(res)
    },
    // 5.删除选中行数据
    async handleDeleteList(selectedRows) {
      const res = await axios.post('/api/wu_vue_2_test/delList', selectedRows)
      await this.getTableData()
      this.showMsg(res)
    },

    // 删除选中行数据（批量删除）
    handleDeleteSelectionRows() {
      // 返回选中行的对象数组
      const selectedRows = this.$refs.multipleTableRef.getSelectionRows()
      console.log(selectedRows)
      this.handleDeleteList(selectedRows)
    },
    // 分页事件处理方法
    handleSizeChange() {
      console.log('handleSizeChange', this.pageSize)

    },
    // 分页事件处理方法
    handleCurrentChange() {
      console.log('handleCurrentChange', this.currentPage)
    },
    // 显示添加新数据对话框
    showAddDialog() {
      this.isEdit = false
      this.dialogFormVisible = true
    },
    // 显示编辑对话框
    showEditDialog(index, row) {
      console.log(index, row)
      this.dialogFormVisible = true
      this.isEdit = true
      this.form = row
    },
    // 显示操作结果消息
    showMsg(res) {
      if (res.data.code === 200) {
        ElMessage({
          message: res.data.msg,
          type: 'success',
          plain: true,
        })
      } else {
        ElMessage({
          message: res.data.msg,
          type: 'error',
          plain: true,
        })
      }
    }
  }
}
</script>

<style scoped>
h1 {
  color: #191919;
}

.operation_panel {
  margin-bottom: 16px;
}

.el-pagination {
  margin-top: 16px;
}
</style>